<template>
  <div class="product-list">
    <div v-if="!head" class="product-list-header" @click="productListClick">
      <div class="header-icon"></div>
      <span class="header-title">{{ title }}</span>
      <span class="iconfont">&#xe650;</span>
    </div>
    <div class="product-list-body">
      <cart-product-body :item="item" :index="index" v-for="(item, index) in items" v-bind:key="index"></cart-product-body>
    </div>
    <no-more></no-more>
  </div>
</template>

<script>
import CartProductBody from './CartProductBody'
import NoMore from '../../../NoMore'


export default {
  name: 'CartProductList',
  data () {
    return {}
  },
  props: ['items', 'title', 'type', 'head'],
  components: {
    CartProductBody,
    NoMore
  },
  computed: {},
  methods: {
    productListClick: function () {
      if (this.type == 'recommend') {
        this.$router.push({
			  name: 'HomeGoodslistRecommend',
			  query: { sort_key: this.type }
        })
      } else {
		  this.$router.push({
		    name: 'HomeGoodslist',
		    query: { sort_key: this.type }
		  })
	  }
    }
  }
}
</script>

<style lang="scss" scoped>
.product-list {
  background: #ffffff;
  margin-top: 0.6rem;
  margin-bottom: 2.5rem;
  .product-list-header {
    display: flex;
    height: 2rem;
    padding: 0 0.25rem;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    .header-title {
      font-size: 0.7rem;
      color: #333;
    }
    .header-icon {
      width: 1rem;
      height: 1rem;
    }
  }
  .product-list-body {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
